Vue.extend(options)

使用 Vue 的建構子，創建一個子類別，參數是一個包含 Component 選項的物件。

其中選項 data 在 Vue.extend() 中必須是函數。

<div id="mount-point"></div>

// create constructor
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// create an instance of Profile and mount it on an element
new Profile().$mount('#mount-point')

附上 fiddle https://jsfiddle.net/hunterliu/zgLu51y9/

疑惑：

• 如果我需要一個 Vue Instance 我會用 new Vue({})。
• 如果我需要一個 Vue Component 我會用 Vue.component({})。

那 Vue.extend({}) 到底是可以用在哪？

我個人的經驗和理解是：

• 我沒實際用過，不知道何種情況用的到，歡迎各位大神留言告訴我。
• 個人理解是：Vue.extend({})是Vue.component({})的核心，換句話說：
  • 在實體化 Component 時會用到 Extend。
  • Vue.component 是一個語法糖，使我們不需透過 Extend 和其他程序來實體化 Vue Instance 的子類別。

Vue.nextTick

在下次 DOM 更新循環結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。

以下範例表達的是：分別在 DOM 的更新循環前後，使用vm.$el.textContent獲取 DOM。

<div id="example">{{ message }}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // change data
console.log(vm.$el.textContent); // false

Vue.nextTick(function () {
  console.log(vm.$el.textContent); // true
})

請按 F12 打開 console。

附上 fiddle https://jsfiddle.net/hunterliu/t1aazxzv/

解釋：當vm.message被修改為new message時，DOM 並沒有立刻重新渲染，而是在事件循環隊列清空時的下一個循環(tick)中更新。

個人理解：可以使用Vue.nextTick取得更新後的 DOM。
雖然 Vue.js 通常是鼓勵開發者以「數據驅動」的方式思考，避免直接操作DOM，但是仍然有需要操作 DOM 的時候。

補充：當我們將一個物件傳給 Vue instance 的 data，會 map 此物件所有的屬性，使用 Object.defineProperty 轉換成 getter/setter。
然而 Object.defineProperty 在 IE8 和其以下版本不支援，也就是 Vue 只能支援到 IE9 的原因。

官方文件延伸閱讀: Async Update Queue

Vue.directive

最簡易的範例 v-focus：

<input v-focus>

Vue.directive('focus', {
  inserted (el) {
    el.focus()
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/4gx1tvct/

官方文件延伸閱讀: Custom-directive